<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title')</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    @yield('head')
        <!-- Дополнительные стили -->
        <style>
            .wrapper {
                display: flex;
            }

            .content {
                flex: 1;
                padding: 20px;
            }

            .sidebar {
                width: 250px;
                background-color: #193756; /* измененный цвет фона */
                color: white;
                height: 100vh;
                transition: all 0.3s;
            }

            .menu {
                background-color: #193756; /* измененный цвет фона */
                color: #007bff; /* голубой цвет текста */
                padding: 10px;
                margin-bottom: 10px;
                overflow: hidden;
                transition: all 0.3s;
            }

            .menu ul {
                list-style-type: none;
                padding: 0;
            }

            .menu-title {
                cursor: pointer;
            }

            .footer {
                background-color: #193756; /* измененный цвет фона */
                color: white;
                text-align: center;
                padding: 10px;
            }

            @media (max-width: 768px) {
                .wrapper {
                    flex-direction: column;
                }

                .sidebar {
                    width: 0;
                    overflow: hidden;
                }

                .content {
                    width: 100%;
                }

                .menu {
                    height: 0;
                    padding: 0;
                }
            }
        </style>

</head>
<body>

<div class="wrapper">
    @include('admin.layouts.sidebar')

    <div class="content">
        @yield('content')
    </div>
</div>

@include('admin.layouts.footer')

@yield('scripts')
<script>
    $(document).ready(function(){
        $(".toggle-btn").click(function(){
            $(".sidebar").toggleClass("collapsed");
            $(".menu").css("height", "0");
        });

        $(".menu-title").click(function(){
            $(this).next("ul").slideToggle();
        });
    });
</script>

</body>
</html>

